import React from 'react'
import { connect } from 'react-redux'
import {Link} from 'react-router-dom'

import './index.css'
// import Loading from '../../../base/Loading'
import Swiper from '../../../base/Swiper'
import { getRecommend, getDJBanner, getTopPlayList } from '../../../store/recommend.redux'


@connect(
  (state) => {
    return ({
      banners: state.recommend.banners,
      djBanners: state.recommend.djBanners,
      topPlayList: state.recommend.topPlayList
    })
  },
  {
    getRecommend, getDJBanner, getTopPlayList
  }
)



class Recommend extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.props.getRecommend();//调用常规轮播图
    this.props.getDJBanner()// 调用DJ轮播图
    this.props.getTopPlayList()
  }

  render() {
    return (
      <div className="recommend">
        {/* <Loading title ="加载中"></Loading> */}
        {/* <!-- 轮播图 --> */}
        <div className="banner">
          <Swiper banners={this.props.banners}></Swiper>
        </div>
        {/* // <!-- 电台 --> */}
        <div className="station">
          <h2 className="sta_title">电台</h2>
          <ul>
            {/* <!-- 服务端有问题,无法接收真实电台的歌单ID,所以固定为26 --> */}

            {
              this.props.djBanners.map((val, index) => (
                <a href={val.url} key={index}>
                  <li>
                    <div>
                      <img src={val.pic} alt="" />
                      <span className="iconfont icon-bofang"></span>
                    </div>
                    <h2 className="station_name">{val.typeTitle}</h2>
                  </li>
                </a>

              ))
            }


          </ul>
        </div>
        {/* 歌单推荐 */}
        <div className="topplaylist">
          <h2 className="sta_title">精品歌单</h2>

          <ul>
            {
              this.props.topPlayList.map((p, i) => (
                <Link to={`/songList/${p.id}`} key={p.id}>

                {/* // <a href="#" key={p.id}> */}

                  <li>
                    <div >
                     
                        <img src={p.coverImgUrl} alt="" />
                   
                      <span className="iconfont icon-erji">{p.playCount}</span>
                    </div>
                    <h2 className="station_name">{p.name}</h2>
                  </li>
                {/* // </a> */}
                </Link>

              ))
            }
          </ul>
        
        </div>

        {/* <!-- 底部 --> */}
        <div className="foot">
          <p className="foot_computer">
            <a href="https://y.qq.com/?ADTAG=myqq&amp;nomobile=1#type=index">查看电脑版网页</a>
          </p>
          <p className="foot_logo">
            <img src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo_ch.svg?max_age=2592000" alt="" />
          </p>
          <div className="copyright">
            <p>Copyright © 1998 -  Tencent. All Rights Reserved.</p>
            <p>联系电话：0755-86013388 QQ群：55209235</p>
          </div>
        </div>
      </div>
    )
  }
}
export default Recommend